<!doctype html>
<html lang="zh-Hans">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <title>零售门店销售与服务 · Retail · ขายปลีก</title>
  <style>
    :root{
      --bg-main:#f8f4ed;
      --bg-card:#ffffff;
      --text-main:#36281e;
      --text-light:#705844;
      --gold-light:#f2e6c8;
      --gold-normal:#b9945c;
      --gold-deep:#8c6d3b;
      --border-color:#e2d4bc;
      --shadow-light:0 4px 12px rgba(140,109,59,0.05);
      --shadow-normal:0 6px 18px rgba(140,109,59,0.1);
      --radius-small:8px;
      --radius-normal:16px;
      --radius-large:999px;
      --transition:all 0.3s ease;
    }

    *{
      box-sizing:border-box;
      margin:0;
      padding:0;
    }

    html,body{
      height:100%;
      scroll-behavior:smooth;
    }

    body{
      font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, sans-serif; 
      color:var(--text-main); 
      line-height:1.7;
      background:
        radial-gradient(120px 120px at 15% 20%, rgba(242,230,200,0.35), transparent 70%),
        radial-gradient(150px 150px at 85% 15%, rgba(242,230,200,0.25), transparent 70%),
        radial-gradient(130px 130px at 25% 85%, rgba(242,230,200,0.2), transparent 70%),
        linear-gradient(180deg, #f5efe6, var(--bg-main));
      background-attachment:fixed;
    }

    header{
      position:sticky; 
      top:0; 
      z-index:100; 
      background:rgba(255,255,255,0.98); 
      backdrop-filter:blur(20px);
      border-bottom:1px solid var(--border-color);
      box-shadow:var(--shadow-light);
    }

    .wrap{
      max-width:920px; 
      margin:0 auto;
      padding:18px 20px;
    }

    h1{
      margin:0; 
      font-size:1.15rem; 
      color:var(--gold-deep);
      font-weight:600;
    }

    small{
      color:var(--text-light);
      font-size:0.85rem;
      display:block;
      margin-top:5px;
    }

    .toolbar{
      display:flex; 
      flex-wrap:wrap;
      gap:12px; 
      margin-top:15px; 
      align-items:center;
    }

    .segmented{
      display:inline-flex; 
      border:1px solid var(--border-color); 
      border-radius:var(--radius-large); 
      overflow:hidden;
      background-color:var(--bg-card);
    }

    .segmented button{
      padding:10px 18px; 
      border:0; 
      background:transparent; 
      color:var(--text-light); 
      cursor:pointer;
      font-size:0.9rem;
      transition:var(--transition);
    }

    .segmented button:hover{
      background-color:var(--gold-light);
      color:var(--gold-deep);
    }

    .segmented button.active{
      background:linear-gradient(135deg, var(--gold-light), #e8d6b0); 
      color:var(--gold-deep); 
      font-weight:600;
      box-shadow:inset 0 2px 4px rgba(140,109,59,0.1);
    }

    .btn{
      padding:10px 18px; 
      border-radius:var(--radius-small); 
      border:1px solid var(--border-color); 
      background:var(--bg-card); 
      color:var(--text-main); 
      cursor:pointer;
      font-size:0.9rem;
      transition:var(--transition);
      display:flex;
      align-items:center;
      gap:6px;
    }

    .btn:hover{
      border-color:var(--gold-normal);
      background-color:var(--gold-light);
      color:var(--gold-deep);
    }

    .btn.gold{
      background:linear-gradient(135deg, var(--gold-light), #e8d6b0); 
      border-color:var(--gold-normal); 
      color:var(--gold-deep); 
      font-weight:600;
    }

    .btn.gold:hover{
      background:linear-gradient(135deg, #e8d6b0, #dbc89f);
      box-shadow:0 3px 10px rgba(140,109,59,0.15);
    }

    .card{
      background:var(--bg-card); 
      border:1px solid var(--border-color); 
      border-radius:var(--radius-normal); 
      padding:22px; 
      margin:18px 0; 
      box-shadow:var(--shadow-normal);
      transition:var(--transition);
    }

    .card:hover{
      box-shadow:0 12px 28px rgba(140,109,59,0.15);
      transform:translateY(-2px);
    }

    h2{
      margin:0 0 18px; 
      font-size:1.05rem; 
      color:var(--gold-deep);
      font-weight:600;
      display:flex;
      align-items:center;
      gap:8px;
    }

    h2::before{
      content:''; 
      width:9px; 
      height:9px; 
      border-radius:50%;
      background-color:var(--gold-normal);
    }

    .mind{
      padding:26px 0;
      display:flex;
      flex-direction:column;
      align-items:center;
    }

    .mind svg{
      width:100%; 
      height:auto; 
      max-height:480px;
      max-width:820px;
    }

    footer{
      margin:35px 0 65px; 
      color:var(--text-light); 
      text-align:center; 
      font-size:0.9rem;
      padding-top:18px;
      border-top:1px solid var(--border-color);
    }

    .hidden{
      display:none !important;
    }

    .lang-row{
      display:flex;
      flex-direction:column;
      gap:14px;
      margin-bottom:18px;
    }

    .lang-row:last-child{
      margin-bottom:0;
    }

    .lang-row p{
      padding:14px 18px;
      border-radius:var(--radius-small);
      background-color:var(--bg-main);
      border-left:3px solid var(--gold-normal);
      position:relative;
      transition:var(--transition);
    }

    .lang-row p:hover{
      background-color:var(--gold-light);
    }

    .tag{
      display:inline-block;
      padding:4px 10px;
      margin-right:10px;
      border-radius:4px;
      background-color:var(--gold-light);
      color:var(--gold-deep);
      font-size:0.8rem;
      font-weight:600;
      box-shadow:0 2px 4px rgba(140,109,59,0.1);
    }

    .mini{
      padding:6px 12px;
      margin-left:12px;
      border-radius:4px;
      border:1px solid var(--border-color);
      background-color:var(--bg-card);
      color:var(--text-light);
      cursor:pointer;
      font-size:0.8rem;
      transition:var(--transition);
    }

    .mini:hover{
      background-color:var(--gold-light);
      color:var(--gold-deep);
      border-color:var(--gold-normal);
    }

    .ttsline{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:14px;
      padding:14px 0;
      border-bottom:1px solid var(--border-color);
    }

    .ttsline:last-child{
      border-bottom:none;
    }

    .ttsline strong{
      min-width:90px;
      color:var(--gold-deep);
      font-weight:600;
    }

    .ttsline label{
      display:flex;
      align-items:center;
      gap:7px;
      color:var(--text-light);
      font-size:0.9rem;
    }

    .ttsline input[type="range"]{
      width:110px;
      accent-color:var(--gold-normal);
    }

    .ttsline select{
      padding:7px 12px;
      border-radius:4px;
      border:1px solid var(--border-color);
      background-color:var(--bg-card);
      color:var(--text-main);
      font-size:0.85rem;
      transition:var(--transition);
    }

    .ttsline select:hover{
      border-color:var(--gold-normal);
    }

    .rules{
      padding-left: 32px; /* 给序号留出空间 */
      display:flex;
      flex-direction:column;
      gap:24px;
    }

    .rules li{
      padding-bottom:10px;
      border-bottom:1px dashed var(--border-color);
      position:relative;
      list-style: none; /* 移除默认列表样式 */
    }

    .rules li::before{
      content:attr(data-rule-num);
      position:absolute;
      left:-32px;
      top:2px;
      width:24px;
      height:24px;
      border-radius:50%;
      background-color:var(--gold-light);
      color:var(--gold-deep);
      font-size:0.8rem;
      font-weight:600;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .rules li:last-child{
      border-bottom:none;
      padding-bottom:0;
    }

    @media (max-width:768px){
      .ttsline{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
      }

      .ttsline strong{
        margin-bottom:5px;
        min-width:unset;
      }

      .rules{
        padding-left:28px;
      }

      .rules li::before{
        left:-28px;
      }
    }

    @media (max-width:480px){ 
      h1{
        font-size:1rem; 
      } 

      .btn{
        padding:9px 14px; 
        font-size:0.85rem;
      }

      .segmented button{
        padding:9px 14px;
        font-size:0.85rem;
      }

      .card{
        padding:18px;
      }

      .lang-row p{
        padding:12px 16px;
        font-size:0.9rem;
      }

      .mini{
        padding:5px 10px;
        margin-left:8px;
        font-size:0.75rem;
      }

      .ttsline input[type="range"]{
        width:90px;
      }
    }
  </style>
</head>
<body>
  <header>
    <div class="wrap">
      <h1>零售门店销售与服务规定 · Retail Sales & Service Rules · ข้อกำหนดการขายและการบริการ</h1>
      <small>中文 · English · ไทย</small>
      <div class="toolbar">
        <div class="segmented" id="viewMode">
          <button class="active" data-mode="all">全部 All ทั้งหมด</button>
          <button data-mode="zh">只看中文</button>
          <button data-mode="en">English only</button>
          <button data-mode="th">เฉพาะภาษาไทย</button>
        </div>
        <button class="btn gold" id="stopAll">⏹ 停止全部朗读 Stop All</button>
      </div>
    </div>
  </header>

  <main class="wrap">
    <!-- TTS朗读控制区域 -->
    <section class="card" aria-label="TTS">
      <h2>朗读 / Read Aloud / อ่านออกเสียง</h2>
      <div class="ttsline" data-tts="zh">
        <strong>中文</strong>
        <button class="btn" data-role="play-zh">播放</button>
        <button class="btn" data-role="pause-zh">暂停/继续</button>
        <button class="btn" data-role="stop-zh">停止</button>
        <label>语速 <input type="range" min="0.85" max="2.0" step="0.05" value="1" data-role="rate-zh"></label>
        <label>音调 <input type="range" min="0.85" max="1.25" step="0.05" value="1" data-role="pitch-zh"></label>
        <select data-role="voice-zh"></select>
      </div>

      <div class="ttsline" data-tts="en">
        <strong>English</strong>
        <button class="btn" data-role="play-en">Play</button>
        <button class="btn" data-role="pause-en">Pause/Resume</button>
        <button class="btn" data-role="stop-en">Stop</button>
        <label>Rate <input type="range" min="0.85" max="2.0" step="0.05" value="1" data-role="rate-en"></label>
        <label>Pitch <input type="range" min="0.85" max="1.25" step="0.05" value="1" data-role="pitch-en"></label>
        <select data-role="voice-en"></select>
      </div>

      <div class="ttsline" data-tts="th">
        <strong>ไทย</strong>
        <button class="btn" data-role="play-th">เล่นเสียง</button>
        <button class="btn" data-role="pause-th">หยุดชั่วคราว/เล่นต่อ</button>
        <button class="btn" data-role="stop-th">หยุด</button>
        <label>ความเร็ว <input type="range" min="0.85" max="2.0" step="0.05" value="1" data-role="rate-th"></label>
        <label>โทนเสียง <input type="range" min="0.85" max="1.25" step="0.05" value="1" data-role="pitch-th"></label>
        <select data-role="voice-th"></select>
      </div>
    </section>

    <!-- 规则区域 -->
    <section class="card">
      <h2>Rules · 规则 · กฎ</h2>
      <ol class="rules">
        <li data-rule-num="1">
          <div class="lang-row">
            <p data-lang="zh">谁先接待客户，订单就归谁；门口迎宾同事轮流值班；禁止分单，保持公平与秩序。
              <button class="mini" data-mini-play data-lang="zh">朗读</button><button class="mini" data-mini-stop>停止</button>
            </p>
            <p data-lang="en">Whoever serves the customer first owns the order. Entrance staff rotate on duty. No order splitting to keep fairness and order.
              <button class="mini" data-mini-play data-lang="en">Read</button><button class="mini" data-mini-stop>Stop</button>
            </p>
            <p data-lang="th">ใครต้อนรับลูกค้าก่อน ยอดขายเป็นของคนนั้น พนักงานหน้าร้านผลัดเวร ห้ามแบ่งบิล เพื่อความยุติธรรมและมีระเบียบ
              <button class="mini" data-mini-play data-lang="th">อ่าน</button><button class="mini" data-mini-stop>หยุด</button>
            </p>
          </div>
        </li>

        <li data-rule-num="2">
          <div class="lang-row">
            <p data-lang="zh">客户改日回购同一商品，仍由首次接待同事负责；若购买不同商品，则由新接待同事负责。
              <button class="mini" data-mini-play data-lang="zh">朗读</button><button class="mini" data-mini-stop>停止</button>
            </p>
            <p data-lang="en">If a customer returns for the same product, the original staff serves them. For a different product, the new serving staff handles it.
              <button class="mini" data-mini-play data-lang="en">Read</button><button class="mini" data-mini-stop>Stop</button>
            </p>
            <p data-lang="th">หากลูกค้ากลับมาซื้อสินค้าเดิม ให้พนักงานคนเดิมดูแล หากเป็นสินค้าอื่น ให้พนักงานที่ให้บริการใหม่รับผิดชอบ
              <button class="mini" data-mini-play data-lang="th">อ่าน</button><button class="mini" data-mini-stop>หยุด</button>
            </p>
          </div>
        </li>

        <li data-rule-num="3">
          <div class="lang-row">
            <p data-lang="zh">接待尽量独立完成，不影响他人；试用期员工遇到困难可请求协助。
              <button class="mini" data-mini-play data-lang="zh">朗读</button><button class="mini" data-mini-stop>停止</button>
            </p>
            <p data-lang="en">Handle sales independently without disturbing others. Probation staff may ask for help when needed.
              <button class="mini" data-mini-play data-lang="en">Read</button><button class="mini" data-mini-stop>Stop</button>
            </p>
            <p data-lang="th">ทำงานด้วยตนเองโดยไม่รบกวนผู้อื่น พนักงานทดลองงานสามารถขอความช่วยเหลือเมื่อจำเป็น
              <button class="mini" data-mini-play data-lang="th">อ่าน</button><button class="mini" data-mini-stop>หยุด</button>
            </p>
          </div>
        </li>

        <li data-rule-num="4">
          <div class="lang-row">
            <p data-lang="zh">多位客户同时到店时应轮流接待，不得怠慢；成交订单归接待同事。
              <button class="mini" data-mini-play data-lang="zh">朗读</button><button class="mini" data-mini-stop>停止</button>
            </p>
            <p data-lang="en">When many customers arrive, serve in turns and do not neglect anyone. The serving staff owns the order.
              <button class="mini" data-mini-play data-lang="en">Read</button><button class="mini" data-mini-stop>Stop</button>
            </p>
            <p data-lang="th">เมื่อลูกค้าเข้ามาพร้อมกัน ต้องผลัดกันให้บริการ ห้ามละเลย ใครให้บริการ ยอดขายเป็นของคนนั้น
              <button class="mini" data-mini-play data-lang="th">อ่าน</button><button class="mini" data-mini-stop>หยุด</button>
            </p>
          </div>
        </li>

        <li data-rule-num="5">
          <div class="lang-row">
            <p data-lang="zh">同一客户有多笔交易时，各自接待者各自开单；若客户坚持合单，统一归最先接待的同事。
              <button class="mini" data-mini-play data-lang="zh">朗读</button><button class="mini" data-mini-stop>停止</button>
            </p>
            <p data-lang="en">For multiple purchases, each staff bills their own. If the customer wants one bill, attribute it to the first staff.
              <button class="mini" data-mini-play data-lang="en">Read</button><button class="mini" data-mini-stop>Stop</button>
            </p>
            <p data-lang="th">หากมีหลายการซื้อ ให้พนักงานแต่ละคนออกบิลของตน แต่ถ้าลูกค้าต้องการบิลเดียว ให้นับเป็นของพนักงานคนแรก
              <button class="mini" data-mini-play data-lang="th">อ่าน</button><button class="mini" data-mini-stop>หยุด</button>
            </p>
          </div>
        </li>

        <li data-rule-num="6">
          <div class="lang-row">
            <p data-lang="zh">操作标准：佩戴手套；当面称重、查证书、核对单据；货品整齐、柜台干净；收集联系方式并礼貌送别。
              <button class="mini" data-mini-play data-lang="zh">朗读</button><button class="mini" data-mini-stop>停止</button>
            </p>
            <p data-lang="en">Standards: wear gloves; weigh, check certificates and receipts in front of the customer; keep products neat and counters clean; collect contact and say goodbye politely.
              <button class="mini" data-mini-play data-lang="en">Read</button><button class="mini" data-mini-stop>Stop</button>
            </p>
            <p data-lang="th">มาตรฐาน: สวมถุงมือ ชั่งน้ำหนัก ตรวจใบรับรองและเอกสารต่อหน้าลูกค้า สินค้าจัดเรียบร้อย เคาน์เตอร์สะอาด เก็บข้อมูลติดต่อ และกล่าวลาอย่างสุภาพ
              <button class="mini" data-mini-play data-lang="th">อ่าน</button><button class="mini" data-mini-stop>หยุด</button>
            </p>
          </div>
        </li>

        <li data-rule-num="7">
          <div class="lang-row">
            <p data-lang="zh">店内仅有一单时：主任或资深同事提供专业支持（讲解、流程），其他同事做辅助（递货、资料）；门口迎宾不参与。
              <button class="mini" data-mini-play data-lang="zh">朗读</button><button class="mini" data-mini-stop>停止</button>
            </p>
            <p data-lang="en">With only one sale: supervisors or senior staff provide professional support (explain, guide); others assist (pass items, prepare documents); entrance greeters excluded.
              <button class="mini" data-mini-play data-lang="en">Read</button><button class="mini" data-mini-stop>Stop</button>
            </p>
            <p data-lang="th">มีธุรกรรมเดียว: หัวหน้าหรืออาวุโสช่วยอธิบายและแนะนำ ขั้นตอน คนอื่นช่วยงานสนับสนุน พนักงานต้อนรับหน้าร้านไม่เข้าร่วม
              <button class="mini" data-mini-play data-lang="th">อ่าน</button><button class="mini" data-mini-stop>หยุด</button>
            </p>
          </div>
        </li>

        <li data-rule-num="8">
          <div class="lang-row">
            <p data-lang="zh">必须主动介绍“以旧换新”：客户可用旧货获得折扣或换购；此举促进成交并建立信任。
              <button class="mini" data-mini-play data-lang="zh">朗读</button><button class="mini" data-mini-stop>停止</button>
            </p>
            <p data-lang="en">Must promote trade‑in: customers can use old items for discounts or upgrades; this boosts conversion and trust.
              <button class="mini" data-mini-play data-lang="en">Read</button><button class="mini" data-mini-stop>Stop</button>
            </p>
            <p data-lang="th">ต้องแนะนำบริการแลกเก่าเป็นใหม่ ลูกค้าใช้ของเก่าเพื่อรับส่วนลดหรืออัปเกรด ช่วยปิดการขายและสร้างความเชื่อมั่น
              <button class="mini" data-mini-play data-lang="th">อ่าน</button><button class="mini" data-mini-stop>หยุด</button>
            </p>
          </div>
        </li>
      </ol>
    </section>
  </main>

  <footer>
    © <span id="year"></span> 3DG Jewellery 金至尊 — 公平 Fair ยุติธรรม · 专业 Professional มืออาชีพ · 信任 Trust ความเชื่อมั่น
  </footer>

  <script>
    // 自动填充当前年份
    document.getElementById('year').textContent = new Date().getFullYear();

    // 语言切换功能（控制显示不同语言内容）
    const modeBtns = document.querySelectorAll('#viewMode button');
    function applyMode(mode) {
      const langElements = document.querySelectorAll('[data-lang]');
      langElements.forEach(el => {
        if (mode === 'all') {
          el.classList.remove('hidden'); // 全部显示
        } else {
          el.classList.toggle('hidden', el.getAttribute('data-lang') !== mode);
        }
      });
    }
    modeBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        modeBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        applyMode(btn.dataset.mode);
      });
    });

    // TTS核心功能：按语言独立管理实例，确保控制精准
    const ttsManager = {
      instances: { zh: null, en: null, th: null }, // 各语言TTS实例
      voices: { zh: [], en: [], th: [] }, // 各语言可用语音
      currentVoice: { zh: null, en: null, th: null }, // 当前选中语音

      // 初始化语音列表（按语言分类）
      initVoices() {
        const allVoices = speechSynthesis.getVoices();
        // 按语言筛选语音
        this.voices.zh = allVoices.filter(v => v.lang.includes('zh'));
        this.voices.en = allVoices.filter(v => v.lang.includes('en'));
        this.voices.th = allVoices.filter(v => v.lang.includes('th'));
        // 填充下拉框
        this.fillVoiceSelect('zh');
        this.fillVoiceSelect('en');
        this.fillVoiceSelect('th');
      },

      // 填充对应语言的语音下拉框
      fillVoiceSelect(lang) {
        const select = document.querySelector(`[data-role="voice-${lang}"]`);
        if (!select) return;
        select.innerHTML = '';

        // 添加默认选项
        const defaultOpt = document.createElement('option');
        defaultOpt.value = 'default';
        defaultOpt.textContent = lang === 'zh' ? '默认语音' : (lang === 'en' ? 'Default Voice' : 'เสียงปริยาย');
        select.appendChild(defaultOpt);

        // 添加对应语言的语音选项
        this.voices[lang].forEach(voice => {
          const opt = document.createElement('option');
          opt.value = voice.name;
          opt.textContent = `${voice.name} (${voice.lang})`;
          select.appendChild(opt);
        });

        // 绑定语音选择事件
        select.addEventListener('change', (e) => {
          const voiceName = e.target.value;
          this.currentVoice[lang] = voiceName === 'default' 
            ? null 
            : this.voices[lang].find(v => v.name === voiceName);
        });
      },

      // 创建TTS实例（按语言配置参数）
      createTts(lang, text) {
        // 先停止当前语言的朗读
        this.stop(lang);
        
        const tts = new SpeechSynthesisUtterance(text);
        // 基础配置：语言、音量
        tts.lang = lang === 'zh' ? 'zh-CN' : (lang === 'en' ? 'en-US' : 'th-TH');
        tts.volume = 1; // 固定最大音量，避免过小
        
        // 读取语速、音调（从对应控件获取）
        const rate = parseFloat(document.querySelector(`[data-role="rate-${lang}"]`).value);
        const pitch = parseFloat(document.querySelector(`[data-role="pitch-${lang}"]`).value);
        tts.rate = rate;
        tts.pitch = pitch;
        
        // 设置选中的语音（无则用默认）
        if (this.currentVoice[lang]) {
          tts.voice = this.currentVoice[lang];
        }

        // 保存实例
        this.instances[lang] = tts;
        return tts;
      },

      // 播放指定语言的文本
      play(lang, text) {
        if (!text.trim()) return; // 空文本不处理
        const tts = this.createTts(lang, text);
        speechSynthesis.speak(tts);
      },

      // 暂停指定语言的朗读
      pause(lang) {
        if (this.instances[lang] && speechSynthesis.speaking) {
          speechSynthesis.pause();
        }
      },

      // 恢复指定语言的朗读
      resume(lang) {
        if (this.instances[lang] && speechSynthesis.paused) {
          speechSynthesis.resume();
        }
      },

      // 停止指定语言的朗读
      stop(lang) {
        if (this.instances[lang]) {
          speechSynthesis.cancel(this.instances[lang]);
          this.instances[lang] = null;
        }
      },

      // 停止所有语言的朗读
      stopAll() {
        Object.keys(this.instances).forEach(lang => this.stop(lang));
        speechSynthesis.cancel(); // 双重保险
      }
    };

    // 初始化语音（监听语音加载完成事件，兼容部分浏览器）
    window.addEventListener('load', () => {
      ttsManager.initVoices();
      speechSynthesis.onvoiceschanged = () => ttsManager.initVoices();
    });

    // 1. 绑定「顶部TTS控制按钮」事件（按语言独立控制）
    // 中文控制
    document.querySelector('[data-role="play-zh"]').addEventListener('click', () => {
      // 收集所有中文文本（仅要点内容）
      const textList = Array.from(document.querySelectorAll('[data-lang="zh"]'))
        .map(el => el.innerText.replace(/朗读|停止/g, '').trim()); // 剔除按钮文本
      const fullText = textList.join('。 '); // 用句号分隔，保证语义连贯
      ttsManager.play('zh', fullText);
    });
    document.querySelector('[data-role="pause-zh"]').addEventListener('click', () => {
      speechSynthesis.paused ? ttsManager.resume('zh') : ttsManager.pause('zh');
    });
    document.querySelector('[data-role="stop-zh"]').addEventListener('click', () => {
      ttsManager.stop('zh');
    });

    // 英文控制
    document.querySelector('[data-role="play-en"]').addEventListener('click', () => {
      const textList = Array.from(document.querySelectorAll('[data-lang="en"]'))
        .map(el => el.innerText.replace(/Read|Stop/g, '').trim());
      const fullText = textList.join('. ');
      ttsManager.play('en', fullText);
    });
    document.querySelector('[data-role="pause-en"]').addEventListener('click', () => {
      speechSynthesis.paused ? ttsManager.resume('en') : ttsManager.pause('en');
    });
    document.querySelector('[data-role="stop-en"]').addEventListener('click', () => {
      ttsManager.stop('en');
    });

    // 泰文控制
    document.querySelector('[data-role="play-th"]').addEventListener('click', () => {
      const textList = Array.from(document.querySelectorAll('[data-lang="th"]'))
        .map(el => el.innerText.replace(/อ่าน|หยุด/g, '').trim());
      const fullText = textList.join(' ');
      ttsManager.play('th', fullText);
    });
    document.querySelector('[data-role="pause-th"]').addEventListener('click', () => {
      speechSynthesis.paused ? ttsManager.resume('th') : ttsManager.pause('th');
    });
    document.querySelector('[data-role="stop-th"]').addEventListener('click', () => {
      ttsManager.stop('th');
    });

    // 2. 绑定「段落迷你朗读按钮」事件（精准朗读当前段落）
    document.querySelectorAll('[data-mini-play]').forEach(btn => {
      btn.addEventListener('click', () => {
        const lang        = btn.dataset.lang;
        const parentP = btn.closest('p');
        const pureText = parentP.innerText
          .replace(/朗读|Read|อ่าน|停止|Stop|หยุด/g, '') // 剔除按钮和语言标签文本
          .trim();
        ttsManager.play(lang, pureText);
      });
    });

    // 段落「停止」按钮事件
    document.querySelectorAll('[data-mini-stop]').forEach(btn => {
      btn.addEventListener('click', () => {
        const lang = btn.closest('p').dataset.lang;
        ttsManager.stop(lang);
      });
    });

    // 3. 绑定「全部停止」按钮事件
    document.getElementById('stopAll').addEventListener('click', () => {
      ttsManager.stopAll();
    });

    // 4. 绑定「语速/音调滑块」事件（实时更新TTS参数）
    document.querySelectorAll('[data-role^="rate-"]').forEach(range => {
      range.addEventListener('input', (e) => {
        const lang = e.target.dataset.role.split('-')[1];
        if (ttsManager.instances[lang]) {
          ttsManager.instances[lang].rate = parseFloat(e.target.value);
        }
      });
    });

    document.querySelectorAll('[data-role^="pitch-"]').forEach(range => {
      range.addEventListener('input', (e) => {
        const lang = e.target.dataset.role.split('-')[1];
        if (ttsManager.instances[lang]) {
          ttsManager.instances[lang].pitch = parseFloat(e.target.value);
        }
      });
    });

    // 页面滚动时，头部阴影动态变化
    window.addEventListener('scroll', () => {
      const header = document.querySelector('header');
      header.style.boxShadow = window.scrollY > 20 
        ? '0 4px 15px rgba(140,109,59,0.12)' 
        : '0 4px 12px rgba(140,109,59,0.05)';
    });
  </script>
</body>
</html>